<template>
  <div class="RiskManagement">
      <!-- card标签区 -->
      <div class="card-box">
          <el-row :gutter="8">
              <el-col :span="4">
                  <el-card>
                      <div class="top-card-box-item">
                          <div class="item-title">
                              <h4>单位隐患统计</h4>
                              <button class="first-button" type="button" @click="init()">
                                  <i class="el-icon-refresh"></i>
                                  刷新
                              </button>
                          </div>
                          <p style="font-size: 12px">
                              数据更新时间：{{time}}
                          </p>
                      </div>
                  </el-card>
              </el-col>
              <el-col :span="3">
                  <el-card>
                      <div class="top-card-box-item">
                          <div class="item-title title-comme">
                              <p>全部隐患-待整改</p>
                          </div>
                          <div class="item-p">
                              {{cardArr.待整改?cardArr.待整改:0}}
                          </div>
                      </div>
                  </el-card>
              </el-col>
              <el-col :span="3">
                  <el-card>
                      <div class="top-card-box-item">
                          <div class="item-title title-comme">
                              <p>全部隐患-整改中</p>
                          </div>
                          <div class="item-p">
                              {{cardArr.整改中?cardArr.整改中:0}}
                          </div>
                      </div>
                  </el-card>
              </el-col>
              <el-col :span="3">
                  <el-card>
                      <div class="top-card-box-item">
                          <div class="item-title title-comme">
                              <p>全部隐患-累计完成</p>
                          </div>
                          <div class="item-p">
                              {{cardArr.验收通过?cardArr.验收通过:0}}
                          </div>
                      </div>
                  </el-card>
              </el-col>
              <el-col :span="3">
                  <el-card>
                      <div class="top-card-box-item">
                          <div class="item-title title-comme">
                              <p>本月隐患总数</p>
                          </div>
                          <div class="item-p">
                              2
                          </div>
                      </div>
                  </el-card>
              </el-col>
              <el-col :span="4">
                  <el-card>
                      <div class="top-card-box-item">
                          <div class="item-title title-comme">
                              <p>上月隐患总数</p>
                          </div>
                          <div class="last-item-p">
                              <div>0</div>
                              <span>环比：0%</span>
                          </div>
                      </div>
                  </el-card>
              </el-col>
              <el-col :span="4">
                  <el-card>
                      <div class="top-card-box-item">
                          <div class="item-title title-comme">
                              <p>去年同期隐患总数</p>
                          </div>
                          <div class="last-item-p">
                              <div>0</div>
                              <span>环比：0%</span>
                          </div>
                      </div>
                  </el-card>
              </el-col>
          </el-row>
      </div>
  </div>
</template>

<script>
import RiskList from '@/views/risk/RiskList'
import axios  from "axios";
export default {
    data:function (){
        return {
            cardArr:{},
            time:'',
        }
    },
    components:{
        RiskList,
    },
    mounted() {
        this.init()
    },
    methods:{
        init(){
            this.$axios({
                url:'/risk/count',
                params:{}
            }).then(({data})=>{
                if (data.code==='200'){
                    this.cardArr=data.data
                    let aDate = new Date()
                    this.time = aDate.toLocaleString()
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}
i{
    color: #0A92FA;
    font-weight: bold;
}
.top-card-box-item {
    height: 66px;
}
.RiskManagement {
            overflow-y: hidden;
            .el-row {
                margin-bottom: 20px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .el-col {
                border-radius: 4px;
            }
            .card-box {
                margin: 0 12px 12px 8px;
                text-align: left;
                .item-title {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 20px;
                    .first-button {
                        border: 1px solid #f2f6fc;
                        background-color: #FFF;
                        padding: 4px 9px;
                    }
                }
                .title-comme {
                    font-size: 14px;
                }
                .item-p {
                    font-size: 18px;
                    font-weight: bold;
                }
                .last-item-p {
                    display: flex;
                    justify-content: space-between;
                    div {
                        font-size: 18px;
                        font-weight: bold;
                    }
                    span {
                        border: 1px solid #0a92fa;
                        font-size: 12px;
                        border-radius: 4px;
                        padding: 3px 6px;
                    }
                }
            }
}

</style>